var carousel_box = document.querySelector(".carousel_box"),
	carousel = document.querySelector(".carousel"),
	arr_left = document.querySelector(".arr_left"),
	arr_right = document.querySelector(".arr_right"),
	dot = document.querySelector(".dot");

queryData("http://jianshe.bluej.cn/api/index/get_carousel").then(res => {
	// 把图片展示到页面
	res.forEach(function(obj){
		var li = document.createElement("li");
		var img = document.createElement("img");
		img.setAttribute("src","http://jianshe.bluej.cn"+obj.ch_img_url)
		li.appendChild(img);
		carousel.appendChild(li);
	})
	// 生成小圆点
	for (var i = 0; i < res.length; i++) {
		let li = document.createElement("li");
		if (i == 0) {
			li.classList.add("active");
		}
		dot.appendChild(li);
	}
	// 克隆图片
	var clone_first = carousel.firstElementChild.cloneNode(true);
	var clone_last = carousel.lastElementChild.cloneNode(true);
	carousel.appendChild(clone_first);
	carousel.insertBefore(clone_last, carousel.firstElementChild);
	var timer = null;

	auto_run();

	var index = 1,
		flag = true,
		dot_li = dot.querySelectorAll("li");
	carousel.style.transform = `translateX(-${index}00%)`;
	// 左点击
	arr_left.addEventListener("click", function() {
		if (flag) {
			flag = false;
			if (--index == 0) {
				run();
				index = res.length;
				end_run();
			} else {
				run();
			}
			active_dot();
		}
	})
	// 右点击
	arr_right.addEventListener("click", function() {
		if (flag) {
			flag = false;
			if (++index == res.length + 1) {
				run();
				index = 1;
				end_run();
			} else {
				run();
			}
			active_dot();
		}
	})
	// 关闭左右点击
	carousel.addEventListener("transitionend", function() {
		flag = true;
	})
	// 圆点点击切换图片
	dot_li.forEach(function(obj, i) {
		obj.addEventListener("click", function() {
			index = i + 1;
			carousel.style.transition = "none";
			carousel.style.transform = `translateX(-${index}00%)`;
			active_dot();
		})
	})
	// 鼠标进入轮播图
	carousel_box.addEventListener("mouseenter", function() {
		clearInterval(timer);
	})
	// 鼠标离开轮播图
	carousel_box.addEventListener("mouseleave", function() {
		auto_run();
	})
	// 自动轮播
	function auto_run() {
		timer = setInterval(function() {
			if (flag) {
				flag = false;
				if (++index == res.length + 1) {
					run();
					index = 1;
					end_run();
				} else {
					run();
				}
				active_dot();
			}
		}, 3000)
	}
	// 正常轮播
	function run() {
		carousel.style.transition = "all 1s";
		carousel.style.transform = `translateX(-${index}00%)`;
	}
	// 边缘轮播
	function end_run() {
		carousel.addEventListener("transitionend", function() {
			carousel.style.transition = "none";
			carousel.style.transform = `translateX(-${index}00%)`;
		}, {
			once: true
		})
	}
	// 选中圆点
	function active_dot() {
		dot_li.forEach(function(obj, i) {
			if (i == index - 1) {
				obj.classList.add("active");
			} else {
				obj.classList.remove("active");
			}
		});
	}
})



function queryData(path) {
	return new Promise(function(resolve, reject) {
		var xhr = new XMLHttpRequest();
		xhr.open("POST", path);
		xhr.send();
		xhr.addEventListener("readystatechange", function() {
			if (xhr.readyState != 4) return;
			if (xhr.readyState == 4 && xhr.status == 200) {
				resolve(JSON.parse(xhr.responseText).data);
			} else {
				reject("获取数据失败");
			}
		})
	})
}



// xhr.open("POST", "http://jianshe.bluej.cn/api/index/get_carousel");
// xhr.send();
// xhr.addEventListener("readystatechange", function() {
// 	if(xhr.readyState == 4){
// 		if(xhr.status == 200){
// 			// data = JSON.parse(xhr.responseText).data;
// 			// data.forEach(function(obj){
// 			// 	var li = document.createElement("li");
// 			// 	var img = document.createElement("img");
// 			// 	img.setAttribute("src","http://jianshe.bluej.cn"+obj.ch_img_url);
// 			// 	li.appendChild(img);
// 			// 	carousel.appendChild(li);
// 			// })
// 		}
// 	}
// })
